home *** CD-ROM | disk | FTP | other *** search
/ MacAddict Special 2004: T…timate How-To Collection / MacAddict SPECIAL 2004 Ultimate How to Collection.toast / Build a Web Site / Know Thy Code < prev    next >
Text File  |  2003-05-30  |  3KB  |  69 lines
  1. Know Thy Code (a supplement to "Design Your Own Web Site")
  2. by Niko Coucouvanis
  3.  
  4. If you really want to get in and tweak your pages by hand, here’s a little HTML cheat sheet to guide your way. We’re using examples in some of the code that calls for it--substitute your own choices accordingly.
  5.  
  6. Text Formatting
  7. • Set the font face, size (1-7), and color: <FONT FACE="Swiss, Helvetica, Sans-serif" SIZE="4" COLOR="#000000">fonted text</FONT>
  8. • Make text bold: <B>bold text</B>
  9. • Italicize text: <I>italic text</I>
  10.  
  11. Linking
  12. • Create a hotlink to an image, page, or Web site: <A HREF=http://www.webpage.com TARGET="_new">hotlink</A>
  13. (The Target attribute opens the link or image in a new window or a window you’ve named in a prior link tag.)
  14.  
  15. Images
  16. • Insert an image with specified height, width, border, and text-relative alignment, plus alternate text to display to browsers with images disabled:
  17. <IMG SRC="path to image" WIDTH="120" HEIGHT="158" BORDER="0" ALIGN="LEFT" ALT="description of image" HSPACE="3" VSPACE="3">
  18.  
  19. Page Layout
  20. • Create a break before and after paragraph text or images: <P align=”center”>paragraph</P>
  21. (Optional Align attribute can align text left, right, or center.)
  22. • Create a line break: <BR>
  23. • Align contained elements left, right, or center on the page: <DIV ALIGN="RIGHT">align right</DIV>
  24. • Center contained text: <CENTER>align center</CENTER>
  25. • Insert a horizontal rule (great as a page divider): <HR>
  26.  
  27. Advanced Page Layout—Tables
  28. Here’s a simple table in HTML code: Cell-spacing and Cell-padding attributes cushion content from the cell’s edges, Align and Valign attributes dictate alignment within cells, except for the initial TABLE tag where Align governs the alignment of the table itself.
  29.  
  30. <TABLE WIDTH="89%" BORDER="0" ALIGN="RIGHT" CELLPADDING="0" CELLSPACING="1">
  31.     <TR VALIGN="MIDDLE">
  32.         <TD ALIGN="CENTER">row 1, col 1</TD>
  33.         <TD ALIGN="RIGHT">row 1, col 2</TD>
  34.     </TR>
  35.     <TR VALIGN="BOTTOM" ALIGN="CENTER">
  36.         <TD>row 2, col 1</TD>
  37.         <TD>row 2, col 2</TD>
  38.     </TR>
  39. </TABLE>
  40.  
  41. Hint 1: Specify a table border of 1 or 2 pixels for a visual guideline, then set it back to BORDER="0" when you get the layout just right.
  42.  
  43. Create Nested Tables
  44. If you like borders but hate the look of standard HTML table ones, create nested tables instead.
  45. 1. Make a table with no border: 
  46. <TABLE BORDER="0">
  47. 2. Give it one row with one column and a borderly background color, like blue:
  48. <TR>
  49.         <TD BGCOLOR="#000099">
  50.             
  51. 3. Now create a table within the table you just created. We'll use multiple cells to show the cell borders:
  52.             <TABLE CELLSPACING="2" CELLPADDING="12">
  53.                 <TR ALIGN="CENTER" VALIGN="MIDDLE">
  54.                     <TD WIDTH="50%" BGCOLOR="#FFFFFF">*
  55.                     </TD>
  56.                     <TD WIDTH="50%" BGCOLOR="#FFFFFF">**
  57.                     </TD>
  58.                 </TR>
  59.                 <TR ALIGN="CENTER" VALIGN="MIDDLE">
  60.                     <TD WIDTH="50%" BGCOLOR="#FFFFFF">***
  61.                     </TD>
  62.                     <TD WIDTH="50%" BGCOLOR="#FFFFFF">****
  63.                     </TD>
  64.                 </TR>
  65.             </TABLE>
  66.         </TD>
  67.     </TR>
  68. </TABLE>
  69.